<script>
import BackgroundComponents from "./genealogicalBackgroundComponents/backgroundComponents.vue";
import app from "../../../config/app";

export default {
  name: "mrZhongWu",
  components: {BackgroundComponents},
  data() {
    return {
      IMG_URL: app.IMG_URL,
      nameList: [
        {name: '张'},
        {name: '李'},
        {name: '王'},
        {name: '赵'},
        {name: '钱'},
        {name: '孙'},
        {name: '周'},
        {name: '吴'},
        {name: '郑'},
        {name: '王'},
        {name: '冯'},
        {name: '陈'},
        {name: '褚'},
        {name: '卫'},
        {name: '蒋'},
        {name: '沈'},
        {name: '韩'},
        {name: '杨'},
        {name: '朱'},
      ]
    }
  },
  methods:{
    goPath(){
      this.$nav.navigateTo('/pages/genealogyPage/surnameOrigin')
    }
  }
}
</script>

<template>
  <view class="mrZhongWu allColumnCenter">
    <background-components class="mt-60" title="姓氏树">
      <template v-slot:content>
        <view class="mrZhongWu_surnameTree allRowCenter">
          <image class="mrZhongWu_surnameTree_image" :src="`${IMG_URL}surnameTree.png`" mode="scaleToFill"></image>
        </view>
      </template>
    </background-components>
    <background-components class="mt-60" title="张姓始祖">
      <template v-slot:content>
        <view class="mrZhongWu_founder row">
          <view class="mrZhongWu_founder_left">
            <!--            <image class="mrZhongWu_founder_left_image"></image>-->
          </view>
          <view class="mrZhongWu_founder_right ml-67">
            <view class="mrZhongWu_founder_right_name">
              <text class="mrZhongWu_founder_right_name_text">张挥</text>
            </view>
            <view class="mrZhongWu_founder_right_tips">
              <text class="mrZhongWu_founder_right_tips_text">百家姓 第3名</text>
            </view>
            <view class="mrZhongWu_founder_right_statistics">
              <text class="mrZhongWu_founder_right_statistics_text">总人口120w</text>
            </view>
            <view class="mrZhongWu_founder_right_line mt-23"></view>
            <view class="mrZhongWu_founder_right_lineSecond mt-4"></view>
            <view class="mrZhongWu_founder_right_operation alignItemsCenter justify-around mt-32">
              <view class="mrZhongWu_founder_right_operation_list allColumnCenter">
                <image class="mrZhongWu_founder_right_operation_list_image"
                       :src="`${IMG_URL}love5.png?x-oss-process=image/resize,w_44,h_44`"></image>
                <text class="mrZhongWu_founder_right_operation_list_text mt-8">点赞20</text>
              </view>
              <view class="mrZhongWu_founder_right_operation_list allColumnCenter">
                <image class="mrZhongWu_founder_right_operation_list_image"
                       :src="`${IMG_URL}love5.png?x-oss-process=image/resize,w_44,h_44`"></image>
                <text class="mrZhongWu_founder_right_operation_list_text mt-8">点赞20</text>
              </view>
              <view class="mrZhongWu_founder_right_operation_list allColumnCenter">
                <image class="mrZhongWu_founder_right_operation_list_image"
                       :src="`${IMG_URL}love5.png?x-oss-process=image/resize,w_44,h_44`"></image>
                <text class="mrZhongWu_founder_right_operation_list_text mt-8">点赞20</text>
              </view>
            </view>
            <view class="mrZhongWu_founder_right_viewStyle row items-center justify-end mt-25">
              <text class="mrZhongWu_founder_right_viewStyle_text">查看详情</text>
            </view>
          </view>
        </view>
      </template>
    </background-components>
    <view class="mrZhongWu_search allRowCenter mt-20">
      <image class="mrZhongWu_search_image" :src="`${IMG_URL}search.png?x-oss-process=image/resize,w_44,h_44`"></image>
      <text class="mrZhongWu_search_text">搜索姓名</text>
    </view>
    <background-components class="mt-20">
      <template v-slot:content>
        <view class="mrZhongWu_nameList">
          <view class="mrZhongWu_nameList_list allRowCenter" v-for="(item, index) in nameList" :key="index" @click="goPath()">
            <text class="mrZhongWu_nameList_list_text">{{ item.name }}</text>
          </view>
        </view>
      </template>
    </background-components>
  </view>
</template>

<style scoped lang="scss">
.mrZhongWu {
  width: 702rpx;
  background: #FFEDC7;

  .mrZhongWu_surnameTree {
    width: 516rpx;
    height: 734rpx;
    background: #f1ede5;

    .mrZhongWu_surnameTree_image {
      width: 516rpx;
      height: 734rpx;
    }


  }

  .mrZhongWu_founder {
    .mrZhongWu_founder_left {
      width: 216rpx;
      height: 260rpx;
      background: #A0A0A0;

      .mrZhongWu_founder_left_image {
        width: 216rpx;
        height: 260rpx;
      }
    }

    .mrZhongWu_founder_right {
      .mrZhongWu_founder_right_name {
        .mrZhongWu_founder_right_name_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #292929;
        }
      }

      .mrZhongWu_founder_right_tips {
        .mrZhongWu_founder_right_tips_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #4B4B4B;
        }
      }

      .mrZhongWu_founder_right_statistics {
        .mrZhongWu_founder_right_statistics_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #4B4B4B;
        }
      }

      .mrZhongWu_founder_right_line {
        width: 279rpx;
        height: 2rpx;
        background: #DBB485;
        opacity: 0.5;
      }

      .mrZhongWu_founder_right_lineSecond {
        width: 294rpx;
        height: 2rpx;
        background: #DBB485;
        opacity: 0.5;
      }

      .mrZhongWu_founder_right_operation {
        .mrZhongWu_founder_right_operation_list {
          .mrZhongWu_founder_right_operation_list_image {
            width: 44rpx;
            height: 44rpx;
          }

          .mrZhongWu_founder_right_operation_list_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18rpx;
            color: #3B3B3B;
          }
        }

      }

      .mrZhongWu_founder_right_viewStyle {
        .mrZhongWu_founder_right_viewStyle_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #4B4B4B;
        }
      }
    }
  }

  .mrZhongWu_search {
    width: 661rpx;
    height: 80rpx;
    background: #FAD582;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .mrZhongWu_search_image {
      width: 44rpx;
      height: 44rpx;
    }

    .mrZhongWu_search_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #CC8A00;
    }
  }

  .mrZhongWu_nameList {
    width: 500rpx;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 20rpx;

    .mrZhongWu_nameList_list {
      .mrZhongWu_nameList_list_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #292929;
      }
    }
  }
}
</style>